<template>
    <div>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            
            <!-- <el-table-column prop="date" label="日期" /> -->
            <el-table-column v-for="(item, keyVal, i) of headers" :key="i" :label="item">
                
                <template v-if="item != '操作'" #default="scope">
                    <div>{{ scope.row[keyVal] }}</div>
                </template>

                <template v-else #default="scope">
                    <!-- <div>{{ obj }}--{{ dele }}</div> -->
                    <el-button @click="obj = scope.row">编辑</el-button>
                    <el-button @click="dele=scope.row" type="danger">删除</el-button>
                </template>
                
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
defineProps(["tableData", "headers"])
let obj = ref(20);
let dele = ref(30);
// 暴露子组件的参数数据
defineExpose({
    obj,
    dele
})

let handleSelectionChange = () => {

}
</script>

<style scoped lang="scss"></style>